<template>
    <div class="sonelist">
        <div class="greatplaylist">
            <h1>发现好歌单</h1>
            <button>查看更多</button>
        </div>

        <div class="swiper-container1">
            <div class="swiper-wrapper">
                <div v-for="(music,i) in recommendList" :key="music.id" class="swiper-slide">
                    <router-link :to="{path:'/listview',query:{id:music.id}}">
                        <img :src="music.picUrl" :alt="music.name" />
                        <span>{{ music.name }}</span>
                        <div class="title">
                            <svg class="icon" aria-hidden="true">
                                <use xlink:href="#icon-erji"></use>
                            </svg>
                            <small>{{playCount(music.playCount)}}</small>
                        </div>
                    </router-link>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->
            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->
            <!-- 如果需要滚动条 -->
            <!-- <div class="swiper-scrollbar"></div> -->


        </div>

    </div>

</template>


<script>
    import { getMusiclist } from "@/api/index";
    import Swiper from 'swiper';
    import "swiper/css/swiper.css"
    export default {
        name: "Sonelist",

        methods: {
            btnClick() {
                const vm = this;
                vm.$router.push({ name: "listview" })
            }
        },
        data() {
            return {
                recommendList: {},
                formatN:[]
            };
        },
        computed:{
            playCount(){
               
                    return function(number){
                        if(number === 0){
                            return number + '';
                        }else if(number>1 && number<10000){
                            return number + '';
                        }else{
                            return (number / 10000).toFixed(2) + '万'
                        }
                    }
            
        },
        },
     
        async mounted() {
            let musicList = await getMusiclist(10);
            this.recommendList = musicList.data.result;
            new Swiper('.swiper-container1', {
                slidesPerView: 3.5,
                spaceBetween: 10,
                // loop: true, // 循环模式选项  
                // effect: 'fade',//渐变切换
                paginationClickable: true,//分页器切换
                paginationClickable: true,
                observer: true,//修改swiper自己或子元素时，自动初始化swiper
                observeParents: true,//修改swiper的父元素时，自动初始化swiper
                // 如果需要分页器
                // pagination: {
                //     el: '.swiper-pagination',
                //     clickable: true,
                // },
                // 如果需要前进后退按钮
                // navigation: {
                //     nextEl: '.swiper-button-next',
                //     prevEl: '.swiper-button-prev',
                // },
            })


        },
    }
</script>



<style scoped lang="scss">
    .icon {
        width: 0.7rem;
        height: 0.7rem;
        position: absolute;
        top: 0;
    }

    .home {
        width: 7.5rem;
    }
 .sonelist{
     width: 7.5rem;
     overflow: hidden;
     margin: 0 auto;
 }
    .greatplaylist {
    
        width: 6.7rem;
        margin: 0.4rem auto;
        display: flex;
        justify-content: space-between;

        button {
            width: 1.5rem;
            height: 0.46rem;
            background-color: #fff;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #ccc;
        }
    }

    .swiper-container1{
        width: 7.1rem;
        margin: -0.2rem auto;
        position: relative;
        height: 3rem;
        z-index: 1;

        img {
            width: 100%;
            height: 2rem;
            border-radius: 0.1rem;
        }

        span {
            display: block;
            height: 0.72rem;
            overflow: hidden;
            font-size: 0.24rem;
            line-height: 0.4rem;
        }

        small {
            position: absolute;
            top: .2rem;
            right: 0;
            color: #ccc;
        }
    }

</style>
